<template>
  <div id="app">
    <el-container>
      <el-header>
        <el-menu
          :default-active = "$route.path"
          class = "el-menu-dome"
          mode = "horizontal"
          router
          background-color = "#545c64"
          text-color = "#fff"
          active-text-color = "#ffd04b">
          <el-menu-item index = "/">
            <i class = "el-icon-s-home"></i>
            首页
          </el-menu-item>
          <el-menu-item index = "/InBound">
            <i class = "el-icon-upload"></i>
            入库管理
          </el-menu-item>
          <el-menu-item index = "/OutBound">
            <i class = "el-icon-download"></i>
            出库管理
          </el-menu-item>
          <el-menu-item index = "/Business">
            <i class = "el-icon-document"></i>
            业务管理
          </el-menu-item>
          
          <!-- 用户信息区域 -->
          <div class="user-info">
            <span v-if="currentUser" class="welcome-text">
              欢迎，{{ currentUser.user_id }}
            </span>
            <el-button 
              v-if="currentUser"
              type="text" 
              @click="handleLogout"
              class="logout-btn"
            >
              <i class="el-icon-switch-button"></i>
              退出登录
            </el-button>
          </div>
        </el-menu>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e56;
}

.el-header {
  padding: 0;
}

.el-main {
  padding: 20px;
}

.el-menu {
  display: flex;
  align-items: center;
}

.user-info {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding-right: 20px;
}

.welcome-text {
  color: #fff;
  margin-right: 15px;
  font-size: 14px;
}

.logout-btn {
  color: #fff !important;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.logout-btn:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.logout-btn i {
  margin-right: 4px;
}
</style>

<script>
export default {
  name: 'App',
  data() {
    return {
      currentUser: null
    }
  },
  mounted() {
    this.loadUserInfo()
  },
  methods: {
    loadUserInfo() {
      const userStr = localStorage.getItem('user')
      if (userStr) {
        try {
          this.currentUser = JSON.parse(userStr)
        } catch (error) {
          console.error('解析用户信息失败：', error)
          this.clearUserInfo()
        }
      }
    },
    handleLogout() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.clearUserInfo()
        this.$message.success('已退出登录')
        this.$router.push('/login')
      }).catch(() => {
        // 用户取消退出
      })
    },
    clearUserInfo() {
      localStorage.removeItem('user')
      localStorage.removeItem('isLoggedIn')
      this.currentUser = null
    }
  }
}
</script>